<template>

  <div style="text-align: center;">

    <el-menu style="width: 150px; min-height: 100vh; padding-top: 20px"
             :default-active="path" router
    >
      <!--头像-->
      <a href="javascript:;">
        <el-avatar shape="square" :size="100" :src="imgUrl" @click="toAboutMe"></el-avatar>
      </a>

      <!--用户名-->
      <div class="user-Name">
        <span>
         {{ user.username }}
        </span>
      </div>

      <!--页面选项-->
      <div class="iFont">
        <el-menu-item index="/aboutMe" class="iStyle">
          <template #title>About Me</template>
        </el-menu-item>
        <el-menu-item index="/resume">
          <template #title>Resume</template>
        </el-menu-item>
        <el-menu-item index="/portfolio" class="iStyle">
          <template #title>Portfolio</template>
        </el-menu-item>
        <el-menu-item index="/recommended">
          <template #title>Recommended</template>
        </el-menu-item>
        <el-menu-item index="/blog" class="iStyle">
          <template #title>Blog</template>
        </el-menu-item>
        <el-menu-item index="/user" v-if="user.role === 1">
          <template #title>User</template>
        </el-menu-item>
        <el-menu-item index="/contact" class="iStyle">
          <template #title>Contact</template>
        </el-menu-item>
      </div>

      <!--搜索区域-->
      <div>
        <el-input v-model="search" style="width: 50%;" placeholder="Search">
        </el-input>


        <!--设置按钮-->
        <el-dropdown trigger="click">
          <el-button type="primary" plain>
            <i class="el-icon-setting"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="$router.push('/login')">登出</el-dropdown-item>
            </el-dropdown-menu>
            <el-dropdown-menu>
              <el-dropdown-item @click="$router.push('/personalInformation')">个人信息</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>


      <div style="font-size: 7px; color: darkgray">
        © 2021 All rights <br>
        reserved.
      </div>


    </el-menu>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Aside",

  data() {
    return {
      imgUrl: "https://image.ibear.top/avatar-BlackMan.jpeg",
      search: '',
      user: {},
      path: this.$route.path, //设置菜单默认高亮

    }
  },

  //从缓存中获取用户数据
  created() {
    let userStr = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)

    //请求服务端，确认当前登录用户的信息是否合法
    request.get("/user/" + this.user.id).then(res => {
      if (res.code === '0') {
        this.user = res.data
      }
    })
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toAboutMe() {
      this.$router.push("/aboutMe") //跳转注册界面
    },


  }
}
</script>

<style scoped>
/*.iAvatar{*/
/*  height: 100px;*/
/*  margin: 0 auto;*/
/*}*/

.iStyle {
  border-top-style: solid;
  border-bottom-style: solid;
  border-width: 1px;
  border-color: whitesmoke;


}

.iFont {
  font-family: "Poppins", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  /*font-style: normal;*/
  /*line-height: 5px;*/
  color: #333;
  /*letter-spacing: 0;*/
}

.user-Name {
  font-family: YouSheBiaoTiHei;
  font-size: 24px;
  margin: 20px;
  font-weight: 600;
  font-style: normal;
  /*line-height: 1.2em;*/
  color: #333;
  /*letter-spacing: 0;*/
}


</style>